{% extends 'base_no_cart.html' %}
{% load static %}
{% block title %} 天天生鲜-购物车 {% endblock title %}
{% block sub_page_name %} 购物车 {% endblock sub_page_name %}
{% block body %}
	<form method="post" action="{% url 'order:place' %}">
		<div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
		{% csrf_token %}
		<ul class="cart_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>
			<li class="col06">操作</li>
		</ul>
	{% for sku in skus %}
		<ul class="cart_list_td clearfix">
			<li class="col01"><input type="checkbox" data-id="{{ sku.id }}" value="{{ sku.id }}" name="sku_ids" checked></li>
			<li class="col02"><img src="{{ sku.image.url }}"></li>
			<li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
			<li class="col04">{{ sku.unite }}</li>
			<li class="col05">{{ sku.price }}元</li>
			<li class="col06">
				<div class="num_add" data-id="{{ sku.id }}">
					<a href="javascript:;" class="add fl">+</a>
					<input type="text" class="num_show fl" value="{{ sku.count }}">
					<a href="javascript:;" class="minus fl">-</a>
				</div>
			</li>
			<li class="col07">{{ sku.amount }}元</li>
			<li class="col08" data-id="{{ sku.id }}"><a href="javascript:;">删除</a></li>
		</ul>
	{% endfor %}
	</form>

	<ul class="settlements">
		<li class="col01"><input id="checkAll" type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_price }}</em><br>共计<b>{{ total_count }}</b>件商品</li>
		<li class="col04"><a href="javascript:;">去结算</a></li>
	</ul>

{% endblock body %}
{% block buttomfiles %}
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript">
		$(function(){
			var token = $("input[name='csrfmiddlewaretoken']").val()
			// 提交到确认订单页面
			$(".settlements .col04").click(function(){
				skus = $(".cart_list_td input[type='checkbox']:checked");
				if(skus.length < 1){
					alert("亲,你还没选择商品!!")
					return
				}
				$("form").submit()

			})

			//删除购物车
			$(".cart_list_td .col08").click(function(){
				var id = $(this).data("id")
				var parentEle = $(this).parents('.cart_list_td')
				console.log(parentEle)
				var param = {
					sku_id:id,
					csrfmiddlewaretoken:token
				}

				$.post('/cart/delete',param, function(data){
					if(data.res==1){
						alert("删除成功")
						parentEle.empty();
						getTotalPrice();
					}else{
						alert(data.errmsg)
					}
				})
			})

			// sku选框控制
			$(".cart_list_td input[type=checkbox]").change(function(){
				if(!$(this).prop("checked")){
					$("#checkAll").prop("checked") && $("#checkAll").removeProp("checked")
				}else{
					var eles = $(".cart_list_td input[type=checkbox]")
					var check_num = 0
					for(var item of eles){
						if($(item).prop('checked')){
							check_num++
						}
					}
					if(check_num == eles.length){
						!$("#checkAll").prop("checked") && $("#checkAll").prop("checked",'checked')
					}
				}
				getTotalPrice()
			})

			$("#checkAll").change(function(){
				if($("#checkAll").prop("checked")){
					var eles = $(".cart_list_td input[type=checkbox]")
					for(var item of eles){
						if(!$(item).prop('checked')){
							$(item).prop('checked', 'checked')
						}
					}
				}else{
					var eles = $(".cart_list_td input[type=checkbox]")
					for(var item of eles){
						if($(item).prop('checked')){
							$(item).removeProp('checked')
						}
					}
				}
				getTotalPrice()
			})

			function getCheckGoods(){
				var eles = $(".cart_list_td input[type=checkbox]")
				var skus=[]
				for(var item of eles){
					if($(item).prop('checked')){
						var sku ={
							id: $(item).data("id"),
							amount:parseFloat($(item).parent().parent().find('.col07').text()),
							price: parseFloat($(item).parent().parent().find('.col05').text()),
							count: $(item).parent().parent().find('.num_show').val()
						}
						skus.push(sku)
					}
				}
				return skus
			}

			function getTotalPrice(){
				var total_price=0;
				var total_count=0
				var skus = getCheckGoods()
				console.log(skus)
				for (var sku of skus){
					total_price += sku.amount
					total_count +=  Number(sku.count)
				}
				$(".settlements .col03").find("em").html(total_price.toFixed(2))
				$(".settlements .col03").find("b").html(total_count)
				$(".total_count em").html(total_count)
			}

		$(".add").click(function(){
			var id = $(this).parent().data("id")
			var count = parseInt($(this).siblings(".num_show").val())
			var price =parseFloat($(this).parent().parent().siblings(".col05").text())
			var numEle = $(this).siblings(".num_show")
			var totalEle = $(this).parent().parent().siblings(".col07")
			count++;
			updateCart(id,count,function(){
				numEle.val(count)
				totalEle.html((count*price).toFixed(2)+"元")
				getTotalPrice();
			})
		})

		$(".minus").click(function(){
			var id = $(this).parent().data("id")
			var count = parseInt($(this).siblings(".num_show").val())
			var price =parseFloat($(this).parent().parent().siblings(".col05").text())
			if(count<=1){
				return
			}
			count--;
			var numEle = $(this).siblings(".num_show")
			var totalEle = $(this).parent().parent().siblings(".col07")
			updateCart(id,count,function(){
				numEle.val(count)
				totalEle.html((count*price).toFixed(2)+"元")
				getTotalPrice()
			})
		})

		$(".num_show").blur(function(){
			var id = $(this).parent().data("id")
			var count =$(this).val()
			var price =parseFloat($(this).parent().parent().siblings(".col05").text())
			if(isNaN(count) || !count.trim() || count<1){
				count = 1
			}
			var $this = $(this)
			updateCart(id,count,function(){
				$this.val(parseInt(count))
				$this.parent().parent().siblings(".col07").html((count*price).toFixed(2)+"元")
				getTotalPrice()
			})
		})


		function updateCart(id,count,cb){
			var param = {
				sku_id:id,
				count:count,
				csrfmiddlewaretoken:token
			}

			$.post('/cart/update', param, function(data){
				if(data.res==0){
					window.location.href = '/user/login?next=/cart/'
				}else if(data.res<0){
					alert(data.errmsg)
				}else if(data.res==1){
					cb();
				}
			})

		}

	})

	</script>
{% endblock buttomfiles %}